  <!-- // 商品管理 -->
<template>
  <div class="bigBox">
    <!-- 搜索 -->
    <div class="search">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="商品搜索: ">
          <el-input v-model="value" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 内容 -->
    <!-- 新增角色按钮 -->
    <div class="content">
      <el-row style="height: 60px">
        <el-button
          icon="el-icon-plus"
          size="small"
          type="primary"
          @click="add"
        >新建</el-button>
        <el-button
          size="small"
          type="primary"
          @click="importData"
        >导入数据</el-button>
      </el-row>
      <!-- 渲染表哥 -->
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="180"
        />
        <el-table-column
          prop="skuName"
          label="商品名称"
          width="200"
        />
        <el-table-column
          label="商品图片"
          width="200"
        >
          <template #default="{ row }">
            <img :src="row.skuImage" alt="" class="pic">
          </template>
        </el-table-column>
        <el-table-column
          prop="brandName"
          label="品牌"
          width="200"
        />

        <el-table-column
          prop="unit"
          label="规格"
          width="200"
        />
        <el-table-column
          prop="price"
          label="商品价格"
          width="200"
        />
        <el-table-column
          prop="skuClass.className"
          label="商品类型"
          width="200"
        />
        <el-table-column
          prop="createTime"
          label="创建日期"
          width="200"
        />
        <el-table-column
          label="操作"
          width="110"
        >
          <template #default="{ row }">
            <el-link type="primary" :underline="false" style="margin-right:10px" @click="modify(row)">修改</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-row v-if="this.dataAll.totalCount>10" class="bottom">
        <el-col :span="20"> <div>共{{ this.dataAll.totalCount }}条数据 第{{ this.dataAll.pageIndex }}/{{ this.dataAll.totalPage }}页</div></el-col>
        <el-col :span="4">
          <el-button-group>
            <el-button type="primary" icon="el-icon-arrow-left" :disabled="upShow" @click="up">上一页</el-button>
            <el-button type="primary" :disabled="underShow" @click="under">下一页<i class="el-icon-arrow-right el-icon--right" /></el-button>
          </el-button-group>

        </el-col>
      </el-row>

    </div>
    <add ref="addRef" :visible="visible" @addShowFn="addShowFn" @publicFn="publicFn" /></div>
</template>

<script>
import add from './add.vue'
import { goodsSearch } from '@/api'
export default {
  components: {
    add
  },
  data() {
    return {
      upShow: false, // 上下按钮禁用状态
      underShow: false, // 上下按钮禁用状态
      row: {},
      value: '', // 输入框
      tableData: [], // 渲染页面的列表
      visible: false,
      dataAll: {}// 全部数据
    }
  },
  created() {
    this.publicFn()
  },
  methods: {
    importData() {
      // 导入数据
    },
    // 关闭方法
    addShowFn() {
      this.visible = false
    },
    onSubmit() {
      // 搜索
      this.publicFn(1, 10, this.value)
    },
    modify(row) {
      // 修改
      this.visible = true
      this.$refs.addRef.modifyFn(row)
    },
    add() {
      // 新建
      this.visible = true
    },
    // 公共方法
    async publicFn(pageIndex, pageSize, name) {
      const { data } = await goodsSearch({ pageIndex: pageIndex, pageSize: pageSize, skuName: name })
      this.dataAll = data
      this.tableData = data.currentPageRecords
      console.log(data)
      if (data.pageIndex <= 1) {
        this.upShow = true
      } else {
        this.upShow = false
      }
      if (data.pageIndex === data.totalPage) {
        this.underShow = true
      } else {
        this.underShow = false
      }
    },
    up() {
      // 上一页
      this.publicFn(+this.dataAll.pageIndex - 1, this.dataAll.pageSize)
    },
    under() {
      // 下一页
      this.publicFn(+this.dataAll.pageIndex + 1, this.dataAll.pageSize, '', '')
    }
  }
}
</script>
<style lang="scss" scoped>
.bigBox {
  padding: 20px;

  .search {
    background-color: #fff;
    padding: 10px;
    padding-bottom: 0px;
  }
}
.content {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px;
  }
  .bottom {
  margin-top: 30px;
}
.pic{
      display: block;
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 50%;
    background: #f3f6fb;
    border: 1px solid #f3f6fb;
}
</style>
